<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="lib/layui/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>


		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a>二手车管理</a>
				<a>二手车列表</a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>

		<form class="layui-form" action="" id="searchForm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">品牌:</label>
					<div class="layui-input-inline">
						<select name="brand" id="brand">
							<option value="">选择汽车品牌</option>
							<option>大众</option>
							<option>奔驰</option>
							<option>宝马</option>
							<option>别克</option>
							<option>红旗</option>
							<option>五菱</option>
							<option>特斯拉</option>
						</select>
					</div>
					<label class="layui-form-label">汽车类型:</label>
					<div class="layui-input-inline">
						<select name="type" id="type">
							<option value="">选择汽车类型</option>
							<option>轿车</option>
							<option>跑车</option>
							<option>商务车</option>
							<option>越野车</option>
							<option>电动车</option>
						</select>
					</div>
					<label class="layui-form-label">交易类型:</label>
					<div class="layui-input-inline">
						<select name="saleType" id="saleType">
							<option value="">选择交易类型</option>
							<option value="0">寄售</option>
							<option value="1">求购</option>
						</select>
					</div>
					<label class="layui-form-label">标价范围:</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="priceStr" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">万 -</div>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="priceEnd" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">万</div>

					<div class="layui-input-inline">
						<button type="button" class="layui-btn" lay-submit onclick="searchForm()">搜索</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>

		</form>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
			<xblock>
				<button class="layui-btn" lay-event="add"><i class="layui-icon"></i>添加</button>
			</xblock>
		</div>
		</script>
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">下架</a>
		</script>

		<script src="lib/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

		<script type="text/html" id="img">
			<div >
			  <img  src="images/{{d.picture}}" />
			  </div>
			</script>


		<script>
			var table;
			layui.use('table', function() {
				table = layui.table;

				//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
				//详见：https://www.layui.com/doc/modules/table.html#totalRow
				table.render({
					elem: '#test',
					id: 'carTable',
					url: 'http://localhost:8888/usedcar/car/getAbleCar?token='+document.cookie.split(";")[0],
					page: true,
					limit:5,
					limits:[5,10,15,20],
					even:true,
					toolbar: '#toolbarDemo',
					title: '车辆数据表',
					cols: [
							[ {
							field: 'carId',
							title: 'ID',
							width: 80,
							sort: true,
							templet: function(d) {
								if(d.carId==null){
								                        return "/";                        
								                    }
								return '<b>' + d.carId + '</b>'
							}
						}, {
							field: 'userId',
							title: '用户id',
							width: 120,
							hide: true
						}, {
							field: 'pictureId',
							title: '图片id',
							width: 120,
							hide: true
						}, {
							field: 'sale',
							title: '上架状态',
							width: 120,
							hide:true,
							style:'color:red;font-size:"20px";'
							
						}, {
							field: 'picture',
							title: '缩略图',
							width: 150,
							 templet: function(d){
								 if(d.picture==null){
								                         return "/";                        
								                     }
							        return '<div οnclick="showimg(this)"><img src="images/'+d.picture+'" alt="" ></div>';
							      }
						}, {
							field: 'brand',
							title: '品牌',
							width: 120,
							templet: function(d){
								if(d.brand==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 15px;">' + d.brand + '</p>'
							}
						}, {
							field: 'model',
							title: '型号',
							width: 150,
							templet: function(d){
								if(d.model==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 15px;">' + d.model + '</p>'
							}
						}, {
							field: 'color',
							title: '颜色',
							width: 120,
							templet: function(d){
								if(d.color==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.color + '</p>'
							}
						}, {
							field: 'type',
							title: '汽车类型',
							width: 120,
							templet: function(d){
								if(d.type==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.type + '</p>'
							}
						}, {
							field: 'seatNum',
							title: '座位数',
							width: 120,
							templet: function(d){
								if(d.seatNum==null){
								                        return "";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.seatNum + '</p>'
							}
						}, {
							field: 'timeToMarket',
							title: '上市时间',
							width: 120,
							templet: function(d){
								if(d.timeToMarket==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.timeToMarket + '</p>'
							},
							hide:true
						}, {
							field: 'saleType',
							title: '交易类型',
							width: 120,
							templet: function(d){
								if(d.saleType==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.saleType + '</p>'
							}
						}, {
							field: 'saleTime',
							title: '上架时间',
							width: 120,
							templet: function(d){
								if(d.saleTime==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.saleTime + '</p>'
							}
						}, {
							field: 'newCarPrice',
							title: '新车价',
							width: 120,
							hide:true
						}, {
							field: 'price',
							title: '标价/万元',
							width: 120,
							templet: function(d){
								if(d.price==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.price + '</p>'
							}
						}, {
							field: 'usedTime',
							title: '车龄/年',
							width: 120,
							templet: function(d){
								if(d.usedTime==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.usedTime + '</p>'
							}
						}, {
							field: 'mileage',
							title: '行驶里程/万公里',
							width: 120,
							templet: function(d){
								if(d.mileage==null){
								                        return " ";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.mileage + '</p>'
							}
						}, {
							field: 'note',
							title: '手机号',
							width: 150,
							templet: function(d){
								if(d.note==null){
								                        return "/";                        
								                    }
								return '<p style="font-size: 16px;">' +  d.note + '</p>'
							}
						}, {
							field: 'picture1Path',
							title: '图片1',
							width: 120,
							templet: function(d){
															 if(d.picture1Path==null){
															                         return "/";                        
															                     }
							       return '<div οnclick="showimg(this)"><img src="images/'+d.picture1Path+'" alt="" ></div>';
							     }
						}, {
							field: 'picture2Path',
							title: '图片2',
							width: 120,
							templet: function(d){
															 if(d.picture2Path==null){
															                         return "/";                        
															                     }
							       return '<div οnclick="showimg(this)"><img src="images/'+d.picture2Path+'" alt="" ></div>';
							     }
						}, {
							field: 'picture3Path',
							title: '图片3',
							width: 120,
							hide: true
						},  {
							field: 'picture4Path',
							title: '图片4',
							width: 120,
							hide: true
						}, {
							field: 'picture5Path',
							title: '图片5',
							width: 120,
							hide: true
						}, {
							field: 'picture6Path',
							title: '图片6',
							width: 120,
							hide: true
						}, {
							field: 'picture7Path',
							title: '图片7',
							width: 120,
							hide: true
						}, {
							field: 'phone',
							title: '手机号码',
							width: 150,
							hide: true
						}, {
							fixed: 'right',
							title: '操作',
							toolbar: '#barDemo',
							width: 200,
							style:"height:100px;"
						}]
						],
					done: function(res, curr, count) {
						$("[data-field='sale']").children().each(function() {
							if ($(this).text() == '1') {
								$(this).text("上架中")
							} else if ($(this).text() == '0') {
								$(this).text("未上架")
							}
						});
						$("[data-field='saleType']").children().each(function() {
							if ($(this).text() == '1') {
								$(this).text("求购");
								$(this).css("color","red");
								$(this).css("font-size","16px");
							} else if ($(this).text() == '0') {
								$(this).text("寄售");
								$(this).css("color","red");
								$(this).css("font-size","16px");
							}
						});
					}
					
				});
				//工具栏事件
				table.on('toolbar(test)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'add':
							//添加
							parent.layer.open({
								type: 2, //2跳转到页面
								offset: 'auto',
								title: '添加车辆',
								content: 'car-add.html',
								area: ['1000px', '800px'],
								btnAlign: 'c',
								yes: function() {
									parent.layer.closeAll();
								},
								end: function() {
									window.location.reload();
								}
							});
							break;
					};
				});

				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data; //得到行数据
					var carId = obj.data.carId; //得到行数据的id
					var $ = layui.jquery;
					
					console.log(data);
					if (obj.event === 'detail') { //查看详情
						 layer.open({
							type: 2, //2跳转到页面
							offset: 'auto',
							title: '查看车辆详情',
							content: 'car-detail.html',
							area: ['1000px', '600px'],
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index); //少了这个是不能从父页面向子页面传值的
								//获取子页面的元素，进行数据渲染
								console.log(data.picture);
								//console.log(body.html()) //得到iframe页的body内容
								body.contents().find("#brand").val(data.brand);
								body.contents().find('#previewImg').val(data.picture);
								body.contents().find('#model').val(data.model);
								body.contents().find('#type').val(data.type);
								body.contents().find('#seatNum').val(data.seatNum);
								body.contents().find('#mileage').val(data.mileage);
								body.contents().find('#usedTime').val(data.usedTime);
								body.contents().find('#sale').val(data.sale == 1?"已上架":"未上架");
								body.contents().find('#saleType').val(data.saleType== 0?"寄售":"求购");
								body.contents().find('#note').val(data.note);
								body.contents().find('#price').val(data.price);
								body.contents().find('#color').val(data.color);
								body.contents().find('#picture').val(data.picture);
								body.contents().find('#viewImg').prop('src', 'images/' + data.picture);
								body.contents().find('#viewImg2').prop('src', 'images/' + data.picture1Path);
								body.contents().find('#viewImg3').prop('src', 'images/' + data.picture2Path);
							},
							yes: function() {
								parent.layer.closeAll();
							}
						}); 
					} else if (obj.event === 'del') { //下架
						layer.confirm('真的下架该车辆么', function(index) {
							//后台禁用数据
							obj.del(); //删除该行数据
							layer.close(index); //关闭弹出框
							$.post("http://localhost:8888/usedcar/car/disable?token="+document.cookie.split(";")[0], {
								id: carId
							}, function(response) {
								console.log(response);
								if (response == 1) {
									layer.msg("下架成功");
								} else if (response == 0) {
									layer.msg("下架失败");
								}
							})
						});
					} else if (obj.event === 'edit') { //编辑
						json = JSON.stringify(data);
						layer.open({
							type: 2, //2 跳转到页面
							offset: 'auto',
							title: '修改车辆详情',
							content: 'car-edit.html',
							area: ['1000px', '600px'],
							success: function(layero, index) {
								var body = layer.getChildFrame('body', index); //少了这个是不能从父页面向子页面传值的
								//获取子页面的元素，进行数据渲染
								console.log("行数据id:" + data.carId);
								console.log("行数据手机号:" + data.note);
								console.log("得到iframe页的body内容:" +body.html()) //得到iframe页的body内容
								body.contents().find("#carId").val(data.carId);
								body.contents().find("#brand").val(data.brand);
								body.contents().find('#previewImg').val(data.picture);
								body.contents().find('#model').val(data.model);
								body.contents().find('#type').val(data.type);
								body.contents().find('#seatNum').val(data.seatNum);
								body.contents().find('#mileage').val(data.mileage);
								body.contents().find('#usedTime').val(data.usedTime);
								body.contents().find('#sale').val(data.sale == 1?"已上架":"未上架");
								body.contents().find('#saleType').val(data.saleType== 1?"寄售":"求购");
								body.contents().find('#note').val(data.note);
								body.contents().find('#price').val(data.price);
								body.contents().find('#color').val(data.color);
								body.contents().find('#picture0').prop('src', 'images/' + data.picture);
								body.contents().find('#picture1').prop('src', 'images/' + data.picture1Path);
								body.contents().find('#picture2').prop('src', 'images/' + data.picture2Path);
								
								//form.render(); //更新全部     
							},
							yes: function() {
								console.log("yes!!!");
								parent.layer.closeAll();
							},
							end: function() {
								console.log("end!!!");
								window.location.reload();
							}
						});
					}
				});
				
			
					
				
			});
			/* 提交搜索表单 */
			function searchForm() {
				console.log("111");
					var type = $("#type").val();
					var brand = $("#brand").val();
					var saleType = $("#saleType").val();
					var priceStr = $("#priceStr").val();
					var priceEnd = $("#priceEnd").val();
					table.reload('carTable', {
						where: {
							type: type,
							brand: brand,
							priceStr: priceStr,
							priceEnd: priceEnd,
							saleType:saleType
						},
						page: {
							curr: 1
						}
					});
				}
			
			
			
		</script>
		<script>
			//显示大图片
			    function showimg(t) {
					console.log("222");
			      var img = $(t).find("img");
			      //页面层
			      layer.open({
			        type: 1,
			        skin: 'layui-layer-rim', //加上边框
			         area: ['80%', '80%'], //宽高
			        shadeClose: true, //开启遮罩关闭
			        end: function (index, layero) {
			          return false;
			        },
			        content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
			      });
			    }
		</script>

	</body>
	<!--layui.table图片显示不全，需重新定义CSS  -->
	<style type="text/css">
		.layui-table-cell {
			text-align: center;
			height: auto;
			white-space: normal;
			max-width: 100%;
		}
		}
	</style>
</html>
